<template>
  <div class="page">
    <div class="h-24"></div>
    <banner />
    <div class="h-12"></div>
    <a-affix :offset-top="54" @change="change">
      <div
        class="type-tab w"
        :style="{
          '--background-color': styleAttr['--background-color'],
          '--width': styleAttr['--width'],
          '--shadow': styleAttr['--shadow']
        }"
        @click.stop=""
      >
        <a-anchor class="tab-list">
          <a-anchor-link v-for="tab in tabList" :key="tab.href" :href="tab.href" :title="tab.name" class="tab cursor" />
        </a-anchor>
      </div>
    </a-affix>
    <div v-if="algoItem" class="page__main">
      <component :is="item.componentName()" v-for="item in tabList" :key="item.href" />
    </div>
    <div v-else style="height: 2000px"></div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, provide, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { algoServiceApi } from '@/services/api'

  import ApplyScene from './components/apply-scene.vue'
  import Banner from './components/banner.vue'
  import FunctionDemo from './components/function-demo.vue'
  import FunctionView from './components/function-view.vue'
  import FunctionWay from './components/function-way.vue'
  import VersionLog from './components/version-log.vue'

  export interface AlgoItem {
    algorithmApplicableScenarioVOList: {
      scenarioTag: string
      scenarioContent: string
      downloadImageUrl: string
    }[]
    algorithmDescribe: string
    algorithmFunctionIntroductionVOList: {
      functionTag: string
      functionContent: string
    }[]
    algorithmName: string
    algorithmVersionInfoVOS: {
      versionName: string
      versionDescribe: string
      updateTime: string
    }[]
    createAlgorithmVersionDto: string
    functionDemo: string
    id: number
    downloadImageUrl: string
    labelAndNames: { name: string }[]
    eMethodTypes: number[]
    typeAndNames: { name: string }[]
    operateMethodTypes: number[]
  }

  const route = useRoute()

  const tabList = ref([
    {
      name: '功能介绍',
      componentName: () => FunctionView,
      href: '#function-view'
    },
    {
      name: '功能演示',
      componentName: () => FunctionDemo,
      href: '#function-demo'
    },
    {
      name: '适用场景',
      componentName: () => ApplyScene,
      href: '#apply-scene'
    },
    {
      name: '使用方式',
      componentName: () => FunctionWay,
      href: '#function-way'
    },
    {
      name: '版本记录',
      componentName: () => VersionLog,
      href: '#version-log'
    }
  ])

  const algoItem = ref<AlgoItem>()

  provide('algoItem', algoItem)

  const getAlgoItem = async () => {
    const res = await algoServiceApi.detail(route.params.id as string)
    algoItem.value = res.data
    // 演示地址可能没有，需对tab进行切割
    if (!algoItem.value?.functionDemo) {
      tabList.value.splice(1, 1)
    }
  }

  const styleAttr = {
    '--background-color': '#f7f7fa',
    '--width': '1376px',
    '--shadow': 'none'
  }
  // 固定至顶部时
  const change = (e: any) => {
    if (e) {
      styleAttr['--background-color'] = '#fff'
      styleAttr['--width'] = '100%'
      styleAttr['--shadow'] = '0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
    } else {
      styleAttr['--background-color'] = 'transparent'
      styleAttr['--width'] = '1376px'
      styleAttr['--shadow'] = 'none'
    }
  }

  getAlgoItem()
  onMounted(() => {
    window.scrollTo(0, 0)
  })
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .page {
    position: relative;
    z-index: 10;

    .type-tab {
      display: flex;
      align-items: flex-end;
      width: var(--width);
      height: 56px;
      background-color: var(--background-color);
      // background-color: #f7f7fa;
      border-bottom: 1px solid #e0e5ee;
      box-shadow: var(--shadow);

      .tab-list {
        display: flex;
        justify-content: center;
        width: 100%;

        :deep(.ant-anchor) {
          display: flex;

          &::before {
            display: none;
          }

          .ant-anchor-ink {
            display: none;
          }
        }

        .tab {
          padding: 0;
          width: 92px;
          height: 32px;
          font-size: 16px;
          text-align: center;

          :deep(.ant-anchor-link-title) {
            font-size: 16px;
            color: rgba(25, 25, 48, 0.75);
            font-weight: 400;
            line-height: 24px;
          }

          &.ant-anchor-link-active {
            border-bottom: 3px solid #2a36be;

            :deep(.ant-anchor-link-title) {
              font-weight: 500;
              color: rgba(16, 16, 20, 0.95);
            }
          }

          & + .tab {
            margin-left: 40px;
          }
        }
      }
    }
  }

  .ant-back-top {
    width: 72px;
    height: 128px;
    transition: width height 0.1s;

    .back-up {
      background: #fff;
      border: 1px solid rgba(217, 217, 219, 0.5);
      border-radius: 16px;
      filter: drop-shadow(0 1px 3px rgba(37, 37, 45, 0.16));
      box-shadow: 0 8px 20px rgba(31, 34, 36, 0.08), 0 0 6px rgba(31, 34, 36, 0.04);
      transition: all 0.1s;

      .back-icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 64px;
      }

      .hover-box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 72px;
        height: 64px;
        font-size: 14px;
        text-align: center;
        color: #2a36be;
        font-weight: 700;
        line-height: 22px;

        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 48px;
          height: 1px;
          background: #e8e8eb;
          content: '';
          transform: translateX(-50%);
        }
      }
    }
  }
</style>
